<template>
  <view class="layout-component">
    <view class="left-layout bg"> </view>
    <view class="right-layout">
      <view class="item-layout bg"></view>
      <view class="item-layout main-box bg"></view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.layout-component {
  display: grid;
  grid-template-columns: repeat(1, 200rpx 1fr);

  column-gap: 10rpx;
  row-gap: 10rpx;
  height: 360rpx;
  .left-layout {
    
  }
  .right-layout {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 100rpx 1fr);
    column-gap: 10rpx;
    row-gap: 10rpx;
  }
  .item-layout {
  
  }
  .bg {
    background-color: #f8d0ff;
    border-radius: 10rpx;
  }
}
</style>
